<script setup lang="ts">
import More from '@/components/More/index.vue'
import ContentType from '@/components/ContentType/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import CooperativeBrands from '@/components/CooperativeBrands/index.vue'
import APICommon from '@/api/common/index'
import Content from './components/Content/index.vue'
import type { ModuleList } from '@/api/common/types'
import Activity from '@/components/Activity/index.vue'

defineOptions({
    name: 'Video',
    inheritAttrs: false
})

const $router = useRouter()
const $route = useRoute()

const moduleList = ref<ModuleList[]>([])

const parentList = ref<any[]>([])

const activityList = ref<any[]>([])

provide('activityList', activityList)

function getNewModuleList(category_type: string) {
    APICommon.getNewModuleList(category_type).then(({ data }) => {
        moduleList.value = data.ModuleList
        parentList.value = data.getParentList
        activityList.value = data.getActivityList
    })
}

watch($route, (newValue) => {
    getNewModuleList((newValue.name as string))
}, { immediate: true })

const activeType = shallowRef<any>()

function getModule(data: any, index: any) {
    moduleList.value[index].loading = true
    APICommon.getModule(data).then(({ data }) => {
        moduleList.value[index].goods = data
    }).finally(() => {
        moduleList.value[index].loading = false
    })
}

function onChangeType(type: number | string, id: number) {
    activeType.value = type
    moduleList.value?.forEach((item, index) => {
        if (item.id == id) {
            item.activeType = type
            const data = {
                type,
                show_type: item.show_type,
                id: item.id,
                category_type: $route.name
            }
            getModule(data, index)
        }
    })
}

function handleJumpMore(row: ModuleList) {
    if (row.show_type != 'album') {
        const query = {
            id: row.id,
            show_type: row.show_type,
            more: 1,
            category_type: 'Video',
            type: row.activeType
        }
        $router.push({
            name: 'VideoMore',
            query
        })
    }

    /** 跳转所有专辑页 */
    if (row.show_type == 'album') {
        const query = {
            show_type: row.show_type,
            id: row.id,
            category_type: 'Video'
        }
        $router.push({
            name: 'VideoAlbum',
            query
        })
    }

}

function handleJumpParentMore() {
    $router.push({
        name: 'Cooperation',
        query: {
            type: 'Video'
        }
    })
}


</script>

<template>
    <div class="video">
        <div class="video-content" v-for="item in moduleList" :key="item.id">
            <div class="title">
                <ContentTitle :title="item.title" :englishTitle="item.subtitle"
                    :isGoods="item.show_type == 'album' ? true : false" />
                <ContentType style="margin-left: 50px;" v-if="item.categoryList?.length != 0"
                    :titles="item.categoryList" @onChangeType="onChangeType($event, item.id)" />
                <More style="margin-left: auto;" :title="item.more_name" @click="handleJumpMore(item)" />
            </div>
            <Content v-loading="item.loading" :type="item.activeType" :id="item.id"
                :isCategoryList="item.categoryList?.length == 0" :showType="item.show_type" :goods="item.goods" />
        </div>
        <!-- 活动 -->
        <Activity type="Video" />
        <div class="video-content">
            <div class="title">
                <ContentTitle title="合作品牌" englishTitle="COOPERATIVE BRANDS" />
                <More style="margin-left: auto;" title="更多合作品牌" @click="handleJumpParentMore" />
            </div>
            <CooperativeBrands :parentList="parentList" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.video {
    .title {
        display: flex;
        position: relative;
        margin: 28px 0;
    }

    .video-content {
        box-sizing: border-box;
        width: 1310px;
        padding: 0 20px;
        margin: 0 auto;
    }
}
</style>
